<template>
  <div class="login-tab">
    <div class="login-nav">
      <div
        v-for="tab of tabData"
        :key="tab"
        :class="['nav-item', { active: currenTab == tab }]"
        @click="changeTab(tab)"
      >
        {{ tab }}
      </div>
    </div>
    <div class="login-component">
      <keep-alive>
        <component :is="currentTabComponent"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import AccountLogin from "./AccountLogin.vue";
import { defineAsyncComponent } from "vue";
const QrcodeLogin = defineAsyncComponent(() => import("./QrcodeLogin.vue"));
const MobileLogin = defineAsyncComponent(() => import("./MobileLogin.vue"));
export default {
  name: "MainLogin",
  components: {
    AccountLogin,
    MobileLogin,
    QrcodeLogin,
  },
  data() {
    return {
      currenTab: "Account",
      tabData: ["Account", "Qrcode", "Mobile"],
    };
  },
  computed: {
    currentTabComponent() {
      return this.currenTab.toLowerCase() + "-login";
    },
  },
  mounted() {},

  methods: {
    changeTab(tab) {
      this.currenTab = tab;
    },
  },
};
</script>

<style lang="scss" scoped>
.login-tab {
  width: 500px;
  margin: 20px auto;
  border: 1px solid #000;
  .login-nav {
    height: 50px;
    border-bottom: 1px solid #000;
    .nav-item {
      float: left;
      width: 33.3%;
      text-align: center;
      line-height: 50px;
      &.active {
        background-color: #000;
        color: #fff;
      }
    }
  }
}
</style>